<template>
  <div class="game-view">
    <Row>
      <Col span="24">
        <Form ref="formInline" inline>
          <FormItem>
            <Button type="primary" @click="onClickSaveGameBtn">添加游戏</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <Table border :loading="loading" :columns="tbCol" :data="list" size="small">
          <template slot-scope="{ row, index }" slot="img">
            <img class="icon" :src="row.img"/>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="onClickSaveGameBtn(row)">编辑</Button>
            <Button type="error" size="small" @click="onClickDeleteGameBtn(row)">删除</Button>
          </template>
        </Table>
      </Col>
    </Row>

    <Modal
      v-model="saveModel.show"
      :loading="saveModel.loading"
      :title="saveModel.title"
      @on-cancel="cancelModal"
      @on-ok="saveGame('gameForm')">
      <Form ref="gameForm" :model="gameForm" :rules="ruleValidate" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input v-model="gameForm.name"></Input>
        </FormItem>
        <FormItem label="图标">
          <div class="img-upload">
            <div class="demo-upload-list" v-if="img.length > 0">
              <template>
                <img :src="img">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                </div>
              </template>
            </div>
          </div>
          <Upload :action="Core.Const.NET.UPLOAD_FILE_URL"
                  :show-upload-list="false"
                  :on-success="handleUploadSuccess">
            <Button icon="ios-cloud-upload-outline">上传</Button>
          </Upload>
        </FormItem>
        <FormItem label="链接" prop="url">
          <Input v-model="gameForm.url"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="delModel.show"
      title="提示"
      class-name="del-modal"
      @on-ok="delBlackAccount">
      <p>确定要删除该游戏么?</p>
    </Modal>

    <Modal title="预览图片" v-model="previewModel.visible" footer-hide>
      <img :src="previewModel.img" style="width: 100%">
    </Modal>
  </div>
</template>

<script>

  import Core from 'core/core'

  export default {
    data() {
      return {
        Core: Core,
        loading: true,
        tbCol: [
          {title: 'ID', key: 'id', width: '100px'},
          {title: '名称', key: 'name'},
          {title: '图标', slot: 'img'},
          {title: '链接', key: 'url'},
          {title: '操作', slot: 'action', width: 150, align: 'center'}
        ],
        list: [],

        img: [],
        gameForm: {
          id: 0,
          account: '',
          gameId: ''
        },
        ruleValidate: {
          name: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          url: [
            {required: true, message: '链接不能为空', trigger: 'blur'}
          ],
        },
        saveModel: {
          show: false,
          title: '',
          loading: true
        },
        delModel: {
          show: false,
          id: 0
        },
        previewModel: {
          img: '',
          visible: false
        }
      }
    },
    mounted() {
      this.getGameList()
    },
    methods: {
      getGameList() {
        this.loading = true
        Core.Api.Game.list({})
          .then(res => {
            this.loading = false
            this.list = res.list
          })
      },
      onClickSaveGameBtn(item) {
        this.saveModel.title = item.id ? '编辑游戏' : '添加游戏'
        this.gameForm = {
          id: item.id ? item.id : 0,
          name: item.id ? item.name : '',
          url: item.id ? item.url : ''
        }
        this.img = item.id ? item.img : ''
        this.saveModel.show = true
      },
      onClickDeleteGameBtn(item) {
        this.delModel.id = item.id
        this.delModel.show = true
      },
      cancelModal() {
        this.$refs.gameForm.resetFields()
      },
      handleUploadSuccess(res) {
        this.img = [res.data]
      },
      handleView (name) {
        this.previewModel.img = name;
        this.previewModel.visible = true;
      },
      handleRemove(index) {
        this.img = []
      },
      saveGame(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let id = this.gameForm.id
            let data = {
              id: this.gameForm.id,
              name: this.gameForm.name,
              img: this.img,
              url: this.gameForm.url
            }

            Core.Api.Game.save(data).then(() => {
              this.$Message.success(id ? '修改成功！' : '添加成功！')
              this.getGameList()
              this.saveModel.show = false
            }).catch(err => {
              this.saveModel.loading = false
              setTimeout(() => {
                this.saveModel.loading = true
              })
            })
          } else {
            this.saveModel.loading = false
            setTimeout(() => {
              this.saveModel.loading = true
            })
          }
        })
      },
      delBlackAccount() {
        let data = {
          id: this.delModel.id
        }
        Core.Api.Game.delete(data)
          .then(() => {
            this.$Message.success('删除成功！')
            this.getGameList()
          }).catch(err => {
          this.$Message.error(err.msg)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.game-view {
  .icon {
    width: 60px;
    height: 80px;
    padding: 10px 0;
  }
}
.demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
